<template>
  <div class="screen">
    <div class="div-in-center">
      <el-row>
        <el-col :span="24">
          <h2 style="text-align: center;padding: 20px">居家托养移动应用管理中心用户注册</h2>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">

          </div>
        </el-col>
        <el-col :span="16">


          <el-form ref="userRegisterFrom" :rules="userRegisterRules" :model="user" label-width="80px">


            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" placeholder="4到16位包含字母,数字，下划线，减号"></el-input>
            </el-form-item>


            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" show-password placeholder="必须由数字和字母组成,长度为8-16位之间"></el-input>
            </el-form-item>


            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name"></el-input>
            </el-form-item>


            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="user.gender">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>


            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="user.phone"></el-input>
            </el-form-item>


            <el-form-item label="地址" prop="address">
              <el-input v-model="user.address"></el-input>
            </el-form-item>


            <el-form-item label="注册角色" prop="type">
              <el-radio-group v-model="user.type" size="small">
                <el-radio-button label="0">残疾人</el-radio-button>
                <el-radio-button label="1">监护人</el-radio-button>
                <el-radio-button label="2">陪护员</el-radio-button>
              </el-radio-group>
            </el-form-item>


            <!--          选择残疾人时出现的注册页面-->
            <el-form ref="disabledRegisterFrom" :model="disabled" label-width="80px" v-show="user.type==='0'">
              <!-- <el-form-item label="残疾人">
                <el-input></el-input>
              </el-form-item> -->
            </el-form>

            <!--          选择监护人时出现的注册页面-->
            <el-form ref="guardianRegisterFrom" :model="guardian" label-width="80px" v-show="user.type==='1'">
              <!-- <el-form-item label="监护人">
                <el-input></el-input>
              </el-form-item> -->
            </el-form>


            <!--          选择陪护员时出现的注册页面-->
            <el-form ref="escortRegisterFrom" :rules="escortRegisterRules" :model="escort" label-width="80px"
                     v-show="user.type==='2'">
              <el-form-item label="收款人" prop="payee">
                <el-input v-model="escort.payee"></el-input>
              </el-form-item>
              <el-form-item label="开户行" prop="bank">
                <el-input v-model="escort.bank"></el-input>
              </el-form-item>
              <el-form-item label="卡号" prop="card">
                <el-input v-model="escort.card"></el-input>
              </el-form-item>
            </el-form>


            <el-form-item>
              <el-button type="primary" @click="register()">注册</el-button>
              <router-link to="/" tag="el-button">取消</router-link>
            </el-form-item>
          </el-form>


        </el-col>

        <el-col :span="4">
          <div class="grid-content bg-purple">

          </div>
        </el-col>

      </el-row>

    </div>
  </div>
</template>
<script>
export default {
  data() {


    /*username的自定义校验*/
    let validateUsername = (rule, value, callback) => {
      let userNamePattern = /^[a-zA-Z0-9_-]{4,16}$/;
      if (userNamePattern.test(value)) {
        this.$axios.get("user/isExistUsername/" + value).then(res => {
          if (res.data.code == 500) {
             callback(new Error(res.data.msg))
          }else{
            callback()
          }
        })

      } else {
         callback(new Error("用户名不满足要求(4到16位包含字母,数字，下划线，减号)"))
      }

    };


    /*password 的自定义校验*/
    let validatePassword = (rule, value, callback) => {
      let userPasswordPattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (userPasswordPattern.test(value)) {
         callback()
      } else {
         callback(new Error("密码不满足要求(必须由数字和字母组成,长度为8-16位之间)"))
      }
    };

    /*Phone的自定义校验*/
    let validatePhone = (rule, value, callback) => {
      let userPhonePattern = /^1[3-9]\d{9}$/;
      if (userPhonePattern.test(value)) {
        this.$axios.get("user/isExistPhone/" + value).then(res => {
          if (res.data.code == 500) {
            callback(new Error(res.data.msg))
          }else{
            callback()
          }
        })
      } else {
        callback(new Error("请输入正确的电话号码"))
      }
    };


    /*Card的自定义校验*/
    let validateCard = (rule, value, callback) => {
      let userCardPattern = /^([1-9]{1})(\d{14}|\d{18})$/;
      if (userCardPattern.test(value)) {
        callback()
      } else {
        callback(new Error("请输入正确的银行卡号"))
      }
    };

    return {

      userInfo: [],
      user: {    //用户表
        username: "",
        password: "",
        name: "",
        gender: "",
        phone: "",
        address: "",
        type: ""
      },

      disabled: {  //残疾人表

      },

      guardian: {  //监护人表

      },
      escort: {  //陪护员表
        payee: "",
        bank: "",
        card: "",
      },
      /*user表校验规则*/
      userRegisterRules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {validator: validateUsername, trigger: 'blur'}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {validator: validatePassword, trigger: 'blur'}
        ],
        name: [
          {required: true, message: "请输入姓名", trigger: "blur"},
        ],
        gender: [
          {required: true, message: "请选择性别", trigger: "change"},
        ],
        phone: [
          {required: true, message: "请输入电话号码", trigger: "blur"},
          {validator: validatePhone, trigger: 'blur'}
        ],
        address: [
          {required: true, message: "请输入地址", trigger: "blur"},
        ],
        type: [
          {required: true, message: "请选择你的注册角色", trigger: "change"},
        ],
      },

      /*残疾人表单校验规则*/


      /*监护人表单校验规则*/




      /*escort表单校验规则*/
      escortRegisterRules: {
        payee: [
          {required: true, message: "请输入收款人", trigger: "blur"},
        ],
        bank: [
          {required: true, message: "请输入开户行", trigger: "blur"},
        ],
        card: [
          {required: true, message: "请输入银行卡号", trigger: "blur"},
          {validator: validateCard, trigger: 'blur'}
        ],
      }


    }
  },
  methods: {
    register() {

      //判断是选的哪个注册角色而进入哪个登陆方法
      switch (this.user.type) {
        //残疾人
        case '0' :

          break
        //监护人
        case '1' :

          break

        //陪护员
        case '2' :
          //将user和escort一同放进userInfo传到后端去
          this.userInfo=[];
          this.userInfo.push(this.user, this.escort)
          this.$refs['userRegisterFrom'].validate((valid1) => {
            this.$refs['escortRegisterFrom'].validate((valid2) => {
              console.log(valid1+valid2)
              if (valid1 && valid2) {
                console.log(this.userInfo)
                //说明此时都通过了验证
                this.$axios.post("user/register",this.userInfo).then(res => {
                    if (res.data.code==200){
                      alert("注册成功，将跳转至登录页")
                      this.$router.push("/")
                    }else{
                      alert("注册失败，服务器异常，请稍等")
                    }
                })
              } else {
                return false;
              }
            })
          })
        break
        default:
          this.$refs['userRegisterFrom'].validate((valid) => {
            if (!valid) {
              return false
            }
          })


      }

    }

  },

}
</script>
<style scoped>
a {
  text-decoration: none;
}

template {
  margin: 0;
  padding: 0;
}

.screen {
  position: absolute;
  text-align: left;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 1000px;
  z-index: 5;
  background: linear-gradient(to bottom, #0d9292, #0ab9b9, #02917e);
  box-sizing: border-box;
}

.div-in-center {
  position: relative;
  left: 50%;
  top: 500px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 600px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: #ffffff;
}
</style>